<template>
  <basic-container>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-setting"></i> 平台商品管理</el-breadcrumb-item>
        <el-breadcrumb-item><i class="el-icon-date"></i> 详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <avue-detail v-model="detailGoods" :option="detailOption">

      <template slot-scope="scope" slot="thumbUrlForm">
        <div style="margin-left: 20px"><img :src="detailGoods.thumbUrl" alt="" class="thumb"></div>
      </template>

      <template slot-scope="scope" slot="photoListForm">
        <div>
          <img v-for="(item,index) in detailGoods.photoList"
               :key="index"
               :src="item.picUrl"
               width="180" height="180"
               style="margin-right: 10px" />
        </div>
      </template>

    </avue-detail>
    <avue-crud ref="crud" :data="modelList" :option="tableOption"></avue-crud>
    <avue-detail v-model="detailGoods" :option="detailDescOption"/>
    <div>
      <el-button type="primary" @click="goBack">返 回</el-button>
    </div>
  </basic-container>
</template>

<script>
  import {getEditInfo} from '../../api/goods/goods'
  import {detailOption, tableOption} from '../../const/crud/supply/model_goods'
  export default {
    name: "model_goods_detail",
    data() {
      return {
        detailGoods: {},
        modelList: [],
        detailOption: detailOption,
        tableOption: tableOption,
        goodsId: '',
        detailDescOption:{
          group: [
            {
              icon: 'el-icon-info',
              label: '商品信息',
              prop: 'group1',
              column: [
                {
                  label: "商品描述",
                  prop: 'detailDesc',
                  span: 24,
                }
              ]
            }
          ]
        }
      }
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.goodsId = vm.$route.query.res.goodsId;
        vm.getModelGoods()
      });
    },
    // created() {
    //   this.getModelGoods()
    // },
    methods: {
      getModelGoods() {
        const params = {
          goodsId: this.goodsId
        }
        getEditInfo(params).then(res => {
          this.detailGoods = res.data.data
          this.modelList = this.detailGoods.modelList
        })
      },
      goBack(time = 1000) {
        let that = this;
        setTimeout(function () {
          that.$store.commit('DEL_ONE_TAG', that.$route);
          that.$router.go(-1);
        }, time);
      }
    }
  }
</script>

<style scoped>
  .thumb {
    position: relative;
    top: 50%;
    width:180px;
    height:180px;
  }
</style>
